<template>
    <div>
        <!-- 单词展示 -->
        <!-- 返回图标 -->
        <div class="txhz">
            <div @click="fh" style="width: 50px">
                <van-icon name="share" class="fhtb" />
                <br />
                <span class="fanhui">返回</span>
            </div>
            <!-- 收藏 -->
            <div style="width: 50px" class="yf" @click="shouchang">
                <!-- <router-link to="/home">  </router-link> -->
                <van-icon :name="sj.shouchang?'star':'star-o'" class="fhtb" />
                <br />
                <span class="fanhui">收藏</span>
            </div>

        </div>
        <!-- 取消收藏消息通知 -->
        <van-notify v-model="show3" type="warning" style="height: 46px">
            <van-icon name="passed" style="margin-right: 4px" />
            <span>已取消收藏</span>
        </van-notify>
        <!-- 已收藏消息通知 -->
        <van-notify v-model="show2" type="primary" style="height: 46px">
            <van-icon name="passed" style="margin-right: 4px" />
            <span>收藏成功</span>
        </van-notify>
        <!-- 单词部分 -->

        <div>
            <!-- 单词 -->
            <h1 class="jz">
                {{ sj.danci }}
            </h1>
            <!-- 发音按钮 -->
            <p class="jz2" @click="faying">
                [{{ sj.yinbiao }}]
                <van-icon name="volume-o" />
            </p>
        </div>
        <!-- 音频，接口采用有道词典 http://dict.youdao.com/dictvoice?audio=   -->
        <div>
            <audio controls="controls" hidden="true" preload ref="audio">
                <!-- src动态绑定 -->
                <!-- 'http://dict.youdao.com/dictvoice?audio='+sj.danci -->
                <source :src="'http://dict.youdao.com/dictvoice?audio=' + sj.danci" type="audio/mp3" />
                <source src="song.ogg" type="audio/ogg" />
            </audio>
        </div>
        <!-- 释义部分 -->
        <div class="bk">
            <p class="jc">Web专属释义:{{ sj.dcfy }}</p>

            <textarea class="nr" @touchstart="touchinUk($event)" @touchend="cleartime" v-model="sj.shiyi" readonly>
                <!-- 释义 -->    
            </textarea>
        </div>
        <!-- 修改单词弹出层 -->
        <van-dialog :beforeClose="tainjia" v-model="show4" title="修改释义" show-cancel-button>

            <van-field v-model="sj.dcfy" name="单词释义" label="单词释义" placeholder="请输入单词释义" />
            <van-field v-model="sj.shiyi" rows="2" label="详细释义" type="textarea" placeholder="请输入单词详细释义" />
        </van-dialog>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
    // 向后端发起请求
    /*  格式为 sj: {
           id: 1,
           // 单词
           danci: 'background',
           // 英标
           yinbiao: 'bækɡraʊnd',
           // 单词翻译
           dcfy: '背景',
           // 释义
           shiyi: '在一个div元素中的背景进行相关设置（背景图像、背景定位等）',
   
         }, 
         前端发送参数id
         */

    data() {
        return {
            // 单词详细数据
            sj: [],
            // 控制收藏弹窗
            show2: false,
            show3: false,
            dcbId: null,
            // 控制编辑弹窗
            show4: false,
            // 长按事件的定时器
            Loop: 0,

        };
    },
  
    methods: {
        ...mapMutations(['scdanci', 'bianji']),
        // 点击返回上一页
        fh() {
            this.$router.go(-1);
        }, // 点击发音
        faying() {
            let url = "http://dict.youdao.com/dictvoice?audio=" + this.sj.danci;
            this.$refs.audio.src = url;
            this.$refs.audio.play();
        },
        hq() {
            // 获取父组件路由传过来的数据(该数据为单词本界面,在dc.vue页面中储存到路由中)
            console.log(JSON.parse(this.$route.query.xr2), 'JSON.parse(this.$route.query.xr2)');
            this.sj = JSON.parse(this.$route.query.xr2)
        },
        // 收藏
        shouchang() {

            // 控制收藏图标的行内样式
            this.sj.shouchang = !this.sj.shouchang
            console.log(this.sj, '更新this.sj状态')
            // 导入单词数据和单词本id
            this.scdanci([this.sj, this.dcbId])
        },
        // 监听touchstart和touchend ，自定义长安事件
        touchinUk(event) {
            var that = this;
            clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
            this.Loop = setTimeout(function () {
                that.Loop = 0;
                event.preventDefault();
                that.show4 = true;

            }, 800);
            return false
        },
        cleartime() {
            var that = this;
            clearInterval(this.Loop);
            /*  if (that.Loop != 0) {
                 //单击事件（click）
                 console.log('点击');
             } */
            return false;
        },


        // 添加单词事件
        tainjia(action, dome) {
            if (action === "confirm") {
                // 导入编辑后的单词数据和单词本id
                this.bianji([this.sj, this.dcbId])
                 
          
                dome()
            } else {
                dome()
            }
        }


    },
    created() {
        this.hq();
        // 把会话储存的单词本数据的ID储存
        this.dcbId = JSON.parse(window.sessionStorage.getItem('dcbsj')).id
    },
};
</script>

<style lang="less" scoped>
.fhtb {
    margin-left: 8px;
    margin-top: 8px;
    color: rgb(16, 168, 238);
    font-size: 38px;
    transform: rotateY(180deg);
}
.fanhui {
    color: black;
    font-weight: 700;
    margin-left: 10px;
}
.jz {
    margin-top: 10px;
    text-align: center;
}
.jz2 {
    margin-top: 20px;
    text-align: center;
}
.bk {
    border-top: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);
    height: 100%;
    overflow: scroll;
}
.jz3 {
    text-align: center;
    line-height: 120px;
    margin-top: 55px;
    font-weight: 700;
    font-size: 25px;
    color: rgb(39, 197, 245);
}
.jc {
    font-weight: 700;
}
.nr {
    width: 90%;
    height: 170px;
    display: block;
    margin: auto;
    resize: none;
    text-indent: 2em;
    word-wrap: break-word;
    border: none;
}
.ycmp3 {
    display: none;
}
.xxia {
    margin-top: 50px;
}
.txhz {
    display: flex;
    justify-content: space-between;
}
/deep/.van-field--min-height .van-field__control {
    min-height: 160px;
}
</style>
